<template>
  <el-container>
    <el-header class="bgColor-deepBlue">
      <v-header></v-header>
    </el-header>
    <el-container>
      <el-aside>
        <v-sidebar></v-sidebar>
      </el-aside>
      <div class="home-main" :class="{'main-collapse':collapse}">
        <v-tabs></v-tabs>
        <el-main>
          <div class="main-content">
            <transition name="view" mode="out-in">
              <keep-alive :include="tabsList">
                <router-view></router-view>
              </keep-alive>
            </transition>
          </div>
          <el-backtop target=".main-content">
            <div style="font-size: 12px">TOP</div>
          </el-backtop>
        </el-main>
      </div>
    </el-container>
  </el-container>

</template>
<script>

import vHeader from "@/views/common/home/header";
import vSidebar from "@/views/common/home/leftNav";
import vTabs from "@/views/common/home/tabs";
import bus from "@/utils/bus";

export default {
  data() {
    return {
      collapse: false,
      tabsList: []
    }
  },
  components: {
    vHeader,
    vSidebar,
    vTabs
  },
  created() {
    bus.$on("collapse", msg => {
      this.collapse = msg
    })

    bus.$on("tabs", msg => {
      // 标签栏超过10个则不允许再打开
      if (msg.length > 10) {
        return
      }
      let arr = []
      msg.forEach(item => {
        item.name && arr.push(item.name);
      })
      this.tabsList = arr
//      console.log(this.tabsList)
    });
  }
}
</script>
<style>

.home-main {
  min-width: 1024px;
  position: absolute;
  left: 250px;
  right: 0;
  top: 70px;
  bottom: 0;
  -webkit-transition: left .3s ease-in-out;
  transition: left .3s ease-in-out;
}
.main-collapse {
  left: 65px;
}
.el-main{
  padding: 0px;
  width: 100%;
  height: 94%;
}
.main-content{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
}
</style>
